@import "../../style/default";

.carControl-content {
  //padding-left: 20px;

  .carControl-title {
    font-size: 22px;
    font-weight: bold;
    padding: 8px;
  }

  .carControl-carInfo {
    background: #f5f7f7;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;

    .carInfo-left {
      .carInfo-logo {
        width: 80px;
        height: 80px;
        margin: 4px;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .carInfo-right {
      margin-left: 16px;
      width: 100%;

      .carInfo-right-top {
        font-size: 18px;
        font-weight: bold;
        padding: 4px;
      }

      .carInfo-right-center {
        display: flex;
        justify-content: flex-start;
        padding: 4px;
        text-align: left;
        .customer-name {
          width: 65%;
        }
        .carInfo-showHidden-icon {
          cursor: pointer;
          display: inline-block;
        }
        .mileage {
          width: 35%;
          white-space: nowrap;
          text-overflow:ellipsis;
        }
      }

      .carInfo-right-bottom {
        padding: 4px;
        .car-model {

        }
      }
    }
  }

  .carControl-carFeeDetails {
    background: #f5f7f7;
    padding: 8px;
    margin-bottom: 8px;

    .carFeeDetails-top {
      font-weight: bold;
      padding: 4px;
    }

    .carFeeDetails-center, .carFeeDetails-bottom {
      display: flex;
      justify-content: space-around;
      padding: 4px;
    }
  }

  .carControl-carSolutionInformation {
    background: #f5f7f7;
    padding: 8px;
    margin-bottom: 16px;
    .carFeeDetails-title {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 4px;
    }
    .carFeeDetails-id {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .carControl-msg-text {
    span {
      color: #005a87;
      cursor: pointer;
    }
  }

  .carControl-closeDialogBtn {
    display: flex;
    justify-content: flex-end;

    .closeDialog-btn {
      font-size: 18px;
    }
  }

  .car-title {
    color: #7d7b7b;
  }

}



@media (max-width: $screen-xl-max) {
  .carControl-content {
    .carControl-title {
      font-size: 20px;
    }

    .carControl-carSolutionInformation {
      .carFeeDetails-title {
        flex-wrap: wrap;
        justify-content: flex-start;
        div {
          margin: 0 20px 0 0;
        }
      }
    }
  }
}

